<template>
  <table class="_table">
    <tr class="head_tr">
      <th v-for="(item, index) in colChecked[machineType]" :key="item.col">
        {{ item.col }}
        <van-checkbox
          v-show="activeIndex !== 1"
          class="_checkbox"
          v-model="item.checked"
          checked-color="#15C691"
          :icon-size="12"
          @click="colClick(index + 1, item.checked)"
        ></van-checkbox>
      </th>
    </tr>
    <tr class="body_tr" v-for="(item, index) in list" :key="index">
      <van-checkbox
        v-show="activeIndex !== 1"
        class="_checkbox"
        v-model="rowChecked[machineType][index].checked"
        checked-color="#15C691"
        :icon-size="12"
        @click="rowClick(index, rowChecked[machineType][index])"
      ></van-checkbox>
      <span class="_indexList">{{ rowChecked[machineType][index].row }}</span>
      <td class="_td" v-for="combo in item" :key="combo" @click.stop="oneClick(combo)">
        <span class="_comboName">{{ combo?.comboName }}</span>
        <span class="_comboNum"> {{ combo ? `（${combo?.comboNum}）` : '' }}</span>
      </td>
    </tr>
  </table>
  <div class="_total" v-if="totalList.length">
    <div class="item_total" v-for="item in totalList" :key="item.comboName">
      <span class="_comboName">{{ item.comboName }}</span>
      <span class="total_comboNum"> {{ `(x${item.comboNum})` }}</span>
    </div>
    <div class="text_total">合计</div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { handProjectList } from '@/utils/handProjectList'
import { showConfirmDialog } from 'vant'

const props = defineProps({
  dataList: {
    type: Array,
  },
  machineType: {
    type: String,
  },
  activeIndex: {
    type: Number,
  },
})
const totalList = ref([])

const list = computed(() => {
  return handProjectList(props.dataList, Number(props.machineType))
})

const colChecked = ref({
  2: [
    { col: '第一列', checked: false },
    { col: '第二列', checked: false },
    { col: '第三列', checked: false },
    { col: '第四列', checked: false },
  ],
  3: [
    { col: '第一列', checked: false },
    { col: '第二列', checked: false },
    { col: '第三列', checked: false },
  ],
  4: [
    { col: '第一列', checked: false },
    { col: '第二列', checked: false },
    { col: '第三列', checked: false },
    { col: '第四列', checked: false },
  ],
  5: [
    { col: '第一列', checked: false },
    { col: '第二列', checked: false },
    { col: '第三列', checked: false },
  ],
})
const rowChecked = ref({
  2: [
    { row: 1, checked: false },
    { row: 2, checked: false },
    { row: 3, checked: false },
    { row: 4, checked: false },
    { row: 5, checked: false },
    { row: 6, checked: false },
    { row: 7, checked: false },
    { row: 8, checked: false },
    { row: 9, checked: false },
    { row: 10, checked: false },
    { row: 11, checked: false },
    { row: 12, checked: false },
    { row: 13, checked: false },
    { row: 14, checked: false },
    { row: 15, checked: false },
  ],
  3: [
    { row: 1, checked: false },
    { row: 2, checked: false },
    { row: 3, checked: false },
    { row: 4, checked: false },
    { row: 5, checked: false },
    { row: 6, checked: false },
    { row: 7, checked: false },
    { row: 8, checked: false },
  ],
  4: [
    { row: 1, checked: false },
    { row: 2, checked: false },
    { row: 3, checked: false },
    { row: 4, checked: false },
    { row: 5, checked: false },
    { row: 6, checked: false },
    { row: 7, checked: false },
    { row: 8, checked: false },
    { row: 9, checked: false },
  ],
  5: [
    { row: 1, checked: false },
    { row: 2, checked: false },
    { row: 3, checked: false },
    { row: 4, checked: false },
    { row: 5, checked: false },
    { row: 6, checked: false },
    { row: 7, checked: false },
    { row: 8, checked: false },
    { row: 9, checked: false },
    { row: 10, checked: false },
    { row: 11, checked: false },
    { row: 12, checked: false },
  ],
})
const emit = defineEmits(['oneClick', 'articleData', 'damageData'])

/**过滤所有id一样的数量总和 */
const filterData = () => {
  // 创建一个对象来存储 comboName 对应的 comboNum 的和
  const comboSums = {}
  // 遍历数组，计算 comboName 对应的 comboNum 的和
  props.dataList.forEach((item) => {
    if (comboSums[item.comboName] === undefined) {
      comboSums[item.comboName] = Number(item.comboNum)
    } else {
      comboSums[item.comboName] += Number(item.comboNum)
    }
  })
  // 将结果转换为数组形式
  totalList.value = Object.keys(comboSums).map((comboName) => ({
    comboName: comboName,
    comboNum: comboSums[comboName],
  }))
  // console.log(totalList.value)
}

/** 点击某一列 */
const colClick = (index, checked) => {
  if (!checked) return
  const colList = props.dataList.filter((item) => {
    return item ? item.roadNumber.slice(-1) == index : false
  })
  console.log(colList)
  if (!colList.length) closeBoolean()
  props.activeIndex === 0 ? clickDamage(`${index}列`, colList) : emit('articleData', colList, index)
}

/**点击某一行 */
const rowClick = (index, item) => {
  if (!item.checked) return
  const rowList = list.value[index].filter((ev) => {
    return ev ? ev : false
  })
  if (!rowList.length) closeBoolean()
  props.activeIndex === 0
    ? clickDamage(`${item.row}行`, rowList)
    : emit('articleData', rowList, index)
}

/**点击某一个 */
const oneClick = (item) => {
  emit('oneClick', item)
}

/**清空所有选中 */
const closeBoolean = () => {
  colChecked.value[props.machineType].forEach((item) => {
    item.checked = false
  })
  rowChecked.value[props.machineType].forEach((item) => {
    item.checked = false
  })
}

/**报损的操作 */
const clickDamage = (index, list) => {
  const flag = list.some((item) => {
    return item && Number(item.comboNum) ? true : false
  })
  if (!flag) return
  // console.log(list)
  showConfirmDialog({
    message: `第${index}货道商品清零`,
    confirmButtonColor: '#5ED0AE',
  })
    .then(() => {
      list.forEach((item) => {
        item.comboNum = '0'
      })
      emit('damageData', list)
      closeBoolean()
    })
    .catch(() => {
      closeBoolean()
    })
}

watch(
  () => props.dataList,
  () => {
    filterData()
  },
  { deep: true, immediate: true },
)

defineExpose({
  closeBoolean,
})
</script>

<style lang="scss">
._table {
  display: block;
  box-sizing: border-box;
  border-collapse: collapse;
  width: 347px;
  min-height: 401px;
  padding: 13px 7px 8px;
  border-radius: 6px;
  background-color: #fff;
  .head_tr {
    display: flex;
    padding-left: 22px;
    th {
      font-weight: 400;
      font-size: 12px;
      width: 69px;
      justify-content: center;
      align-items: center;
      margin-right: 11px;
      display: flex;
      ._checkbox {
        margin-left: 5px;
      }
    }
  }
  .body_tr {
    display: flex;
    align-items: center;
    ._td {
      display: flex;
      width: 64px;
      height: 15px;
      line-height: 15px;
      text-align: center;
      font-size: 8px;
      width: 69px;
      margin: 5px 11px 5px 0;
      background-color: #f5fffc;
      ._comboName {
        width: 49px;
        color: #666;
        overflow: hidden; /* 溢出隐藏 */
        text-overflow: ellipsis; /* 文字溢出省略 */
        white-space: nowrap; /* 防止文本换行 */
      }
      ._comboNum {
        width: 15px;
        text-align: center;
      }
    }
    ._indexList {
      text-align: center;
      width: 12px;
      margin: 0 4px 0 3px;
      font-size: 10px;
      color: #999;
    }
    ._checkbox {
      width: 14px;
    }
  }
}
._total {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0 14px;

  padding: 11px 25px 11px 40px;
  width: 347px;
  min-height: 55px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
  .item_total {
    font-size: 10px;
    color: #333;
    display: flex;
    ._comboName {
      width: 64px;
      height: 16px;
      line-height: 16px;
      text-align: right;
      overflow: hidden; /* 溢出隐藏 */
      text-overflow: ellipsis; /* 文字溢出省略 */
      white-space: nowrap; /* 防止文本换行 */
    }
    .total_comboNum {
      width: 25px;
      height: 16px;
      text-align: left;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .text_total {
    position: absolute;
    left: 7px;
    top: 8px;
    font-size: 14px;
    color: #b50000;
  }
}
</style>
